---
title: How to Write Better Containers in Tailwind CSS
description: The best way to set up containers in Tailwind CSS v4 for fluid layouts.
emoji: 🫙
slug: how-to-write-better-containers-in-tailwindcss
pubDate: 2022-09-21
updatedDate: 2025-08-08
terms:
  - container
  - layout
  - responsive
---

import BaseAd from '../../components/BaseAd.astro'

<BaseAd />

## Fluid Containers in Tailwind v4

Want a container that feels modern and fluid? Use the following:

```html
<div class="mx-auto max-w-7xl px-4">
  <!-- Content -->
</div>
```

Or set up a custom utility:

```css
@utility container {
  @apply mx-auto px-4;
}
```

Why use this approach? The default `container` class in Tailwind makes use of fixed breakpoints, this can make layouts feel rigid and less natural. By using `max-w-7xl` and padding, your content adapts smoothly.

For a direct comparison, check out this [fluid container example](https://play.tailwindcss.com/a1nvWMO4Vm?layout=preview&size=1420x720).
